<template>
	<view class="app-container">
		<view style="text-align: center;">
			<view class="user-avatar">
				<view class="user-avatar-img">
					<uv-avatar mode="aspectFit" size="100" :src="avatar" shape="square"></uv-avatar>
				</view>
			</view>
		</view>
		
		<view class="user-info">
			<text>{{nickname.length >= 20 ? nickname.substr(0,20) + "..." : nickname}}</text>
			<text>职位:{{group_name}}</text>
			<text>状态:{{state_name}}</text>
			<text>uid:{{uid}}</text>
		</view>

		<uni-card class="active-box">
			<button @click="toMsgCenter">消息中心</button>

			<!-- <button style="margin-top: 20px;">个人信息</button> -->

			<button @click="logOut" style="margin-top: 20px;" type="warn">退出登录</button>
		</uni-card>
	</view>
</template>

<script>
	import middware from "@/middleware/index.js";
	import ownApi from "@/api/ownApi.js";
	import {
		getImg
	} from "@/api/helpFunc.js";

	export default {
		data() {
			return {
				avatar:"",
				uid:0,
				nickname:"",
				group_name:"",
				state_name:""
			}
		},
		async onLoad() {
			await middware();
			let userInfo = uni.getStorageSync("info");
			this.avatar = getImg(userInfo.avatar);
			this.nickname = userInfo.name;
			this.uid = userInfo.uid;
			this.group_name = userInfo.group_name;
			this.state_name = userInfo.state_name;
		},
		methods: {
			logOut() {
				ownApi.logOut();
			},
			toMsgCenter(){
				uni.navigateTo({
					url:"/pages/msg/index"
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.user-avatar{
	display: inline-block;
	vertical-align: middle
}
.user-avatar-img{
	display: inline-block;
}

.user-info{
	width: 70vw;
	margin: 0 auto;
	text{
		display: block;
		line-height: 2rem;
		text-align: center;
		border-bottom: 1px solid lightblue;
	}
}
</style>